<!-- 点击上传激活 card -->
<template>
  <div class="card_f">
    <el-card>
      <h2>员工导入</h2>
      <el-alert title="每次导入仅可添加1000名员工、姓名、手机、入职时间、聘用形式为必填项" type="warning" show-icon>
      </el-alert>
      <myexcel class="myexcel" :beforeUpload="beforeUpload" :onSuccess="onSuccess"></myexcel>
    </el-card>
  </div>
</template>

<script>
import { userAllinEmpApi } from '@/api/employees'
// 时间格式修改
import dayjs from 'dayjs'
export default {
  methods: {
    // 上传文件之前触发的回调函数
    beforeUpload (file) {
      // file上传的 文件
      //判断文件大小  2M以内上传 ， 以外结束本次操作    
      // size的单位时B 此处注意换算
      const res = file.size < 1024 * 1024 * 2
      if (!res) {
        this.$message.error('文件大于2M不能上传')
      }
      return res
    },
    // 将天数转为日期
    turnday (days) {
      // 得到时间戳
      const mytime = (days - 1) * 24 * 60 * 60 * 1000
      // 转为具体时间
      const newtime = new Date(mytime)
      // 将年份减去70
      newtime.setFullYear(newtime.getFullYear() - 70)
      return newtime
    },
    // 上传文件之后，且组件处理完成后会执行
    async onSuccess (data) {
      console.log(data)
      // 把数据源的中文表头改为英文
      // 定义一个对象，保存中文属性对应的英文属性
      var obj = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }
      // 将数据源中的中文换位对应的英文属性
      // 数据源 data.results (数组对象)
      // map方法 遍历后可以生成新数组（在匿名函数里可以对原数组进行修改，然后输出想要的结果的数组）
      const newData = data.results.map(item => {
        //得到item中的所有属性
        // keys里有所有的键 例如['入职日期','姓名'...]
        //  Object.keys 可以用来获取 data.results对象中的所有键 其返回值是一个数组
        const keys = Object.keys(item)
        // 创建一个新对象，将所有中文改英文
        const newObj = {}
        // 遍历所有键 key为索引  0,1,2...
        keys.forEach(key => {
          // 得到中文属性对应的英文属性的键
          // 即 obj[0] 为 timeOfEntry .....
          const enkey = obj[key]
          let val
          // 对天数进行调整改为日期
          if (key === '入职日期' || key === '转正日期') {

            val = this.turnday(item[key])
            // 格式化为标准 Y-M-D日期格式
            val = dayjs(val).format('YYYY-MM-DD')
            console.log(val)
          } else {
            // 再得到中文属性对应属性的值
            // 第item项的第[key]个值 0[0]的值  201908091
            val = item[key]
          }
          // 添加键值对 把键和值拼起来    timeOfEntry = 201908091...
          newObj[enkey] = val
        })
        // 这个map会重写  data.results 数组
        return newObj
      })
      console.log(newData)
      // 将数据提交到服务器
      await userAllinEmpApi(newData)
      // 提示成功
      this.$message.success('上传文件成功')
      // 跳转到员工列表
      this.$router.push('/employees')
    }
  },
  data () {
    return {

    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.card_f {
  padding: 25px;

  h3 {
    text-align: center;
  }

  .myexcel {
    margin: 40px;
  }

}
</style>